<template>
  <div class="content">
    <dc-header :page-to="''" :icon="'icon-header-back'"
               :title="type === 2 ? '支出类别设置' : '收入类别设置'"
               :action-title="'添加类别'"
               :right-icon="'icon-hearder-add'"
               @submit="addRole">
    </dc-header>
    <div class="head-top">
      <div class="textabovefrom">按住拖动可以调序,点击可进入子类别设置。</div>
      <draggable v-model="payList" :options="{group:'roleName'}" :move="getData" @end="drop">
        <div v-for="item in payList" :key="item.roleCode">
          <mt-cell :to="'/subClassSet' + '/' + item.accountCode" class="account-border-b">
          <span slot="icon">
            <i class="iconfont icon-btn-item-delete light-red" @click.stop="deletePayType(item.accountCode)"
               :class="{'icon-hidden': item.isDefault===1}"></i>
            <span class="ml15">{{item.accountName}}</span>
          </span>
            <span class="right-link">
            <i class="iconfont icon-btn-item-list"></i>
          </span>
          </mt-cell>
        </div>
      </draggable>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import draggable from 'vuedraggable';
  import api from '@/common/api/account';
  import mintUi from '@/common/mintUi';
  import cell from '@/common/plugins/cell';

  export default {
    data () {
      return {
        type: 2,  //1表示收入，2表示支出
        payList: []
      };
    },
    created () {
      if (this.$route.params.type) {
        this.type = parseInt((this.$route.params.type));  //1表示从收入进入，2表示支出进入
      }
      this.getPayList();
    },
    activated () {
      this.getPayList();
    },
    components: {
      'dc-header': header,
      'dc-cell': cell,
      draggable
    },
    methods: {
      addRole () {
        let msg = this.type === 2 ? '新增支出类别' : '新增收入类别';
        mintUi.openPrompt(msg, {inputType: 'text', inputPlaceholder: '最多输入15个汉字'}).then(res => {
          api.addAccountType({accountFlag: this.type, accountName: res}).then(res => {
            mintUi.openToast('新增成功！');
            this.getPayList();
          });
        });
      },
      getPayList () {
        api.getAccountSetList({accountFlag: this.type}).then(res => {
          this.payList = res;
        });
      },
      deletePayType (accountCode) {
        event.preventDefault(); //阻止时间冒泡
        let msg = '删除类别会连同分类下所有历史流水一并删除，为了防止数据丢失，请谨慎确认后再删除？';
        mintUi.openSpeConfirm('删除类别', msg, true, true, '删除流水和分类', '暂不删除').then(res => {
          api.deleteAccountType(accountCode)
            .then(res => {
              mintUi.openToast('删除成功!');
              this.getPayList();
            });
        });
      },
      getData (evt) {
      },
      drop (evt) {
        let data = [];
        for (let i = 0; i < this.payList.length; i++) {
          data[i] = this.payList[i].accountCode;
        }
        ;
        api.updateAccountOrder({accountCodes: data}).then(res => {
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";
  @import "../account";

  i.iconfont {
    font-size: px2rem(48px);
    vertical-align: sub;
  }

  .ml15 {
    margin-left: px2rem(15px);
  }

  i.label {
    display: inline-block;
    width: px2rem(48px);
  }

  .icon-hidden {
    visibility: hidden;
  }
</style>
